import React from 'react';
import Wrapper from '../_Wrapper';
import {Card, List, Button, Affix, Icon, Divider, Drawer, Form} from 'antd';
import MailRow from '../../components/MainRow'
import WriteMail from '../../components/WriteMail';
import MailInfoCard from '../../components/MailInfoCard';
import moment  from 'moment';
import {message} from '../../store';
import QueueAnim from 'rc-queue-anim';

export default class Page extends React.Component {
    state = {
        data: message,
        showMsg: false,
        showItem: 0,
        childrenDrawer: false,
        loading: true,
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                loading: false
            })
        }, 1000)
        
    }
    onChildrenDrawerClose = () => {
        this.setState({
            childrenDrawer: false
        })
    }
    render () {
        const showItem = this.state.data[this.state.showItem]
        return (
                <Wrapper
                    loading = { this.state.loading }
                    style={{background: '#F0F0F0'}}
                    header={
                            <Card title={
                                <QueueAnim  animConfig={{ opacity: [1, 0], translateY: [0, 10] }}>
                                    <h3 key={1} style={{background:'#fff', padding: "0 20px", fontSize: 22}}>星标邮件</h3>
                                </QueueAnim>
                            } 
                            bodyStyle={{padding: 0}} headStyle={{border: 'none', padding:0}}>
                            <MailRow 
                                row={
                                    <div style={{textAlign: "left", width: '100%', background:"#1889ff", borderRadius: '25px 0 0 25px', padding: "0 15px"}}>
                                        <Button size="small" shape="round" style={{marginRight: 10}} icon="delete">删除</Button>
                                        <Button size="small" shape="round" style={{marginRight: 10}} icon="share-alt">转发</Button>
                                    </div>
                                }
                            />
                        </Card>
                    }
                >
                    <List
                        header={<span style={{marginLeft:20}}><b>昨天</b>(1封)</span>}
                        dataSource={this.state.data}
                        renderItem={(item, index) => (
                            <MailRow 
                                onClick = {() => {this.setState({showItem: index, showMsg: true})} }
                                hoverable
                                title={item.author}
                                star={item.type===2}
                                onStar= {() => {
                                    this.state.data[index].type=== 1 ? this.state.data[index].type=2 : this.state.data[index].type= 1
                                    this.setState({})
                                }}
                                desc={<span>{item.title} - <span style={{color: "#999"}}>{item.desc}</span></span>}
                                date={moment().format('MM月DD日')}
                            />
                        )}
                    />
                    <Drawer
                        width="700px"
                        bodyStyle={{
                            padding: 0,
                            marginBottom: 100
                        }}
                        style={{
                            position: 'absolute',
                            left: 0,
                            bottom:0,
                        }}
                        maskStyle={{
                            position:'absolute'
                        }}
                        getContainer= {
                            () =>  document.getElementById('content')
                        }
                        onClose={()=> {this.setState({showMsg: false})}}
                        closable
                        visible={this.state.showMsg}
                    >
                        <MailInfoCard 
                            title={showItem.title}
                            from ={{name: showItem.author,mail: showItem.from}}
                            to= {{name:'Abigail Xiong',mail: 'abigail@qq.com'}}
                            content={showItem.content}
                            onReply={() => {this.setState({childrenDrawer: true})}}
                            onForward={() => {}}
                        />
                        <WriteMail
                            onClose={this.onChildrenDrawerClose}
                            visible={this.state.childrenDrawer}
                         />
                    </Drawer>
                        
                    <Divider>没有了喔</Divider>
                </Wrapper>
        )
    }
}